<template>
    <div class="favorites-container">
        <div class="favorites-wrapper">
            <!-- 左侧导航抽屉 -->
            <div class="drawer-container">
                <div class="drawer-header">
                    <v-list-subheader class="favorites-title">
                        <v-icon color="#7C9CBF" class="mr-2">mdi-bookmark-multiple</v-icon>
                        我的收藏夹
                    </v-list-subheader>
                    <FavoriteEdit :edit-data="editFavorite" :close-event="getUserFavorites">
                        <template #default="{ props }">
                            <v-btn v-bind="props" block class="mb-3 add-btn" color="#7C9CBF" variant="tonal" prepend-icon="mdi-plus">
                                添加收藏夹
                            </v-btn>
                        </template>
                    </FavoriteEdit>
                </div>
                <v-divider class="favorites-divider" />
                
                <v-list mandatory :lines="false" nav v-model:selected="currentFavoriteIndex" class="favorites-list">
                    <div v-if="favoriteItems.length > 0" class="favorites-items">
                        <v-list-item 
                            v-for="(item, i) in favoriteItems" 
                            :key="i"
                            :value="i" 
                            :active="currentFavoriteIndex == i" 
                            color="#7C9CBF"
                            class="favorite-item"
                            rounded="lg"
                        >
                            <template #prepend>
                                <v-icon color="#A3C4E9" class="mr-2">mdi-folder-star</v-icon>
                            </template>
                            <v-list-item-title v-text="item.name" class="favorite-title"></v-list-item-title>
                            <template #append>
                                <v-btn 
                                    variant="text" 
                                    icon 
                                    density="comfortable" 
                                    @click.stop="showMenu(i)"
                                    class="edit-btn"
                                >
                                    <v-icon>mdi-pencil</v-icon>
                                </v-btn>
                            </template>
                        </v-list-item>
                    </div>
                    <div v-else class="no-favorites">
                        <v-icon color="grey-lighten-1" size="large" class="mb-3">mdi-bookmark-off</v-icon>
                        <div class="text-grey-lighten-1">您还没有收藏夹</div>
                        <div class="text-caption text-grey">点击上方按钮创建</div>
                    </div>
                </v-list>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="content-container">
                <div v-if="favoriteItems.length > 0" class="current-favorite-header mb-4">
                    <div class="d-flex align-center">
                        <v-icon color="#7C9CBF" class="mr-2">mdi-play-box-multiple</v-icon>
                        <span class="text-h6">{{ currentFavorite?.name || '我的收藏' }}</span>
                    </div>
                    <v-divider class="mt-2 current-favorite-divider"></v-divider>
                </div>
                
                <VideoList :video-list="videoList"/>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { apiGetFavorites } from '../../../apis/user/favorites';
import { apiGetVideoByFavoriteId } from '../../../apis/video';
import FavoriteEdit from '../../../components/favorite/edit.vue';
import VideoList from '../../../components/video/list.vue';

const favoriteItems = ref([])
const videoList = ref([])
const currentFavoriteIndex = ref([0])
const currentFavorite = computed(() => currentFavoriteIndex.value > -1 ? favoriteItems.value[currentFavoriteIndex.value] : null)

const getUserFavorites = () => {
    apiGetFavorites().then(({ data }) => {
        favoriteItems.value = data.data
        if (favoriteItems.value.length == 0) {
            currentFavoriteIndex.value = []
            return;
        }
        if ((currentFavoriteIndex.value > -1 && currentFavoriteIndex.value < favoriteItems.value.length)) {
            return;
        } else if (favoriteItems.value.length > 0) {
            currentFavoriteIndex.value = [0]
        }
    })
}

const getFavoriteVideo = () => {
    if (currentFavorite.value == null) {
        return;
    }
    apiGetVideoByFavoriteId(currentFavorite.value.id).then(({ data }) => {
        videoList.value = data.data
    })
}

const isShowMenu = ref(false)
const editFavorite = ref(null)
const showMenu = (index) => {
    editFavorite.value = favoriteItems.value[index]
    isShowMenu.value = true
}

getUserFavorites()

watch(currentFavorite, () => {
    getFavoriteVideo()
})

onMounted(() => {
    getFavoriteVideo()
})
</script>

<style scoped>
.favorites-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.favorites-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
}

.drawer-container {
  width: 240px;
  min-width: 240px;
  height: 100%;
  background-color: #1a1b25;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 5;
  overflow-y: auto;
  background-image: radial-gradient(circle at top right, rgba(124, 156, 191, 0.1), transparent 70%);
}

.content-container {
  flex: 1;
  padding: 16px 16px 16px 24px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.drawer-header {
  padding: 16px;
}

.favorites-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.favorites-divider {
  background: linear-gradient(90deg, rgba(124, 156, 191, 0.3), transparent);
  height: 1px;
  margin: 0 16px 16px;
}

.add-btn {
  transition: all 0.3s ease;
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0.5px;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.favorites-list {
  padding: 0 8px;
}

.favorites-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.favorite-item {
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
}

.favorite-item:hover {
  background-color: rgba(124, 156, 191, 0.08);
  transform: translateX(4px);
}

.favorite-item--active {
  background-color: rgba(124, 156, 191, 0.15) !important;
  border-left: 3px solid #7C9CBF;
}

.favorite-title {
  font-weight: 500;
  font-size: 0.95rem;
}

.edit-btn {
  opacity: 0.6;
  transition: all 0.3s ease;
}

.favorite-item:hover .edit-btn {
  opacity: 1;
}

.edit-btn:hover {
  background-color: rgba(124, 156, 191, 0.1);
  transform: rotate(15deg);
}

.no-favorites {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
  padding: 20px;
}

.current-favorite-header {
  margin-bottom: 20px;
}

.current-favorite-divider {
  background: linear-gradient(90deg, rgba(124, 156, 191, 0.3), transparent 80%);
  height: 1px;
  margin-top: 8px;
}

/* 响应式设计 */
@media (max-width: 960px) {
  .favorites-wrapper {
    flex-direction: column;
  }

  .drawer-container {
    width: 100%;
    min-width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .content-container {
    padding: 16px;
  }
}
</style>